<template>
  <div id='exchang_list'>
    <div class="search-box">
        <Row type="flex">
          <Row type="flex" justify="start" class="search-item-left">
            <Col class="search-item">
              <span class="search-label">兑换商品分类：</span>
              <Select v-model="exchangeType" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in exchangeTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <span class="search-label">上架状态：</span>
              <Select v-model="upStatus" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in upStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <span class="search-label">兑换商品名称：</span>
              <Input placeholder="请输入" v-model='goodsName'></Input>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="reset">重置</Button>
            </Col>
          </Row>
          <Row type="flex" justify="end" class="search-item-right">
            <Col class="search-item">
              <Button class="search-btn" type="primary" style="margin-right:8px" @click='upGoods' v-if="hasPermission('moms:product:exchangeproductlisting')">上架</Button>
            </Col>
          </Row>
        </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
      <template slot-scope="{ row }" slot="availableAmount">
        <span>{{row.availableAmount === -1 ? '不限制' : row.availableAmount}}</span>
      </template>
      <template slot-scope="{ row }" slot="couponType">
        <span>{{row.couponType === 0 ? '代金券' : row.couponType === 1 ? '折扣券': ''}}</span>
      </template>
      <template slot-scope="{ row }" slot="status">
        <span>{{row.status === 0 ? '已下架' : row.status === 1 ? '已上架': ''}}</span>
      </template>
      <template slot-scope="{ row }" slot="allTime">
        <span>{{row.upTime + '至' + row.downTime}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Poptip confirm :title="row.status === 1 ? '确定下架吗？' : row.status === 0 ? '确定重新上架吗？' : ''" transfer  style="text-align:left" @on-ok="onOk(row)" @on-cancel="onCancel">
          <i class="iconsys iconxiajia" title="下架" v-if="hasPermission('moms:product:exchangeproductdelisting') && row.status === 1"></i>
          <!-- <i class="iconsys iconshangjia" title="重新上架" v-if="hasPermission('moms:product:exchangeproductrelisting') && row.status === 0"></i> -->
        </Poptip>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts='[20,50,100,200]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { exchangeList, exchangeUp } from '@/api/commondity/index'
export default {
  name: 'exchang_list',
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    }),
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'exchang_list') {
        this.getData()
      }
    }
  },
  data () {
    return {
      loading: false,
      upStatus: '1',
      exchangeType: '0',
      exchangeTypeList: [
        // { value: '1', label: '兑币券' },
        // { value: '2', label: '优惠券' },
        // { value: '3', label: '抵扣券' }
        { value: '0', label: '代金券' },
        { value: '1', label: '折扣券' }
      ],
      upStatusList: [
        { value: '1', label: '已上架' },
        { value: '0', label: '已下架' }
      ],
      goodsName: '',
      pageObj: {
        goodsName: '',
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableData: [],
      columns: [
        {
          title: '兑换商品名称',
          key: 'couponName'
        },
        {
          title: '兑换类型',
          slot: 'couponType'
        },
        {
          title: '兑换数量',
          key: 'price'
        },
        {
          title: '可兑库存',
          slot: 'availableAmount'
        },
        {
          title: '上下架时间',
          slot: 'allTime'
        },
        {
          title: '状态',
          slot: 'status',
          width: 100
        },
        {
          title: '操作时间',
          key: 'modifyTime'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 120
        // }
      ]
    }
  },
  methods: {
    doSearch () {
      this.pageObj.goodsName = this.goodsName
      this.pageObj.pageIndex = 1
      this.getData()
    },
    reset () {
      this.upStatus = '1'
      this.exchangeType = '0'
      this.goodsName = ''
      this.pageObj.goodsName = ''
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    upGoods () {
      this.$router.push({ name: 'exchang_up' })
    },
    onOk (row) {
      let param = {
        exchangeCouponId: row.exchangeCouponId,
        status: row.status === 0 ? '1' : row.status === 1 ? '0' : ''
      }
      this.getUp(param)
    },
    onCancel () {},
    // 下架或重新上架接口
    getUp (param) {
      exchangeUp({
        merchantId: this.merchantId,
        exchangeCouponId: param.exchangeCouponId,
        status: param.status,
        modifierName: this.userName,
        modifierId: this.userId
      }).then(res => {
        if (res.data.status === 200) {
          if (param.status === '0') {
            this.$Message.success('下架成功！')
          } else if (param.status === '1') {
            this.$Message.success('重新上架成功！')
          }
          this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getData () {
      this.loading = true
      exchangeList({
        merchantId: this.merchantId,
        couponType: this.exchangeType,
        couponName: this.pageObj.goodsName,
        status: this.upStatus,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount
          if (result.data.length / this.pageObj.pageSize === 0) {
            if (this.pageObj.pageIndex > 1) {
              this.pageObj.pageIndex--
              this.getData()
            }
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getData()
    if (this.hasPermission(['moms:product:exchangeproductdelisting', 'moms:product:exchangeproductrelisting'])) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: 120
      })
    }
  }
}
</script>
